<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outline{
            outline-color: aquamarine;
        }
        .modal {
            width: 100px;
            height: 200px;
            outline-color: aquamarine;
            position: relative;
            background: radial-gradient(red, purple);
        }
        .modal .close{
            position: absolute;
            top: 5px;
            right: 5px;
        }
        button {
            outline-color:#409eff ;
            background-color: beige;
            cursor: pointer;
            border-color: transparent;
        }
        .flower{
            background-image:linear-gradient(45deg,purple,skyblue) ;
            background-repeat: no-repeat;
        }
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
    <div id="app">
        <component1></component1> 
        <!-- <p title="{{msg}}"> 小萱</p> 不支持这这种写法 -->
        <span class="outline" contenteditable = "true" :title="msg">轮轮廓线可以不是矩形，不信来点我 
                                                    12131231231313 <br/>
                                                    123123123 <br>
                                                    12312312 <br>
                                                    132123  <br>
                                                    <br>
                                                    123123 <br>
                                                    123123123 <br>
                                                    13213123123 <br>
                                                    123123123123 <br>
                                                    123123123123123 <br>
                                                    123123123123123 <br>
                                                                前提是不要用块级元素  
                                                                <hr> 行内块也不行
                                                    123123213
        </span>

        <div>
            <input type="file" placeholder="放入txt文件" name="" id="" onchange="addFile(event,this)"  />
        </div>

        <button :class= "{flower:check}" v-on:click = "visible = true">click me </button>
        <v-modal :visible.sync = "visible" ></v-modal>
        <v-switch v-model = "check"></v-switch>
        
        <!-- $event 应为最后一个参数 -->
    </div>
   
</body>
<script>
  function TreeNode(val) {
      this.val = val;
      this.left = this.right = null;
  }
    let textArr = []// 读取的结果数组
    function addFile(e,that){
        console.log(this,e,that)
        if(that.files.length){
            // 直接写this指向全局 可以在标签属性里写 传进来
            let file = that.files[0];
            let reader = new FileReader();
            if(/text+/.test(file.type)){
                reader.onload = function(){
                    // 这里不能用箭头函数
                    let pre =  document.createElement('pre')
                    pre.textContent = this.result;
                    document.body.append(pre);
                    textArr =  this.result.split('\n')
                    console.log(textArr)
                    debugger
                    // 原来我传的不是数组
                    let arr1 = textArr[0].split(' '),mid = textArr[1].split(' ');
                    arr1.pop();mid.pop();
                    let tree = buildTree2(arr1,mid)
                    let houOrder = sufOrder(tree)
                    res = 0
                    houOrder.map((v,i,arr)=>{
                         v = !v.length? 0 : parseInt(v)
                        res += v * (i + 1)
                    })
                    console.log(res)
                    // console.log(this.result.split('\n')) 按行分割
                }
                reader.readAsText(file)
            }else{
                return []
            }
        }
    }

 function buildTree(preorder, inorder) {

        const help = (pStart,pEnd,iStart,iEnd)=>{
             if(pStart > pEnd) return null 
             const rootVal = preorder[pStart];
             const root = new TreeNode(rootVal);
             if(pEnd == pStart) return root 
             const mid = inorder.indexOf(rootVal); //根节点在中序的位置
             const diff = mid - iStart // 左子树的长度
             root.left = help(pStart + 1, pStart   + diff,iStart, mid - 1) 
             root.right = help(  pStart + diff + 1, pEnd ,mid + 1, iEnd) 
             return root
             }
    return    help(0,preorder.length - 1,0,inorder.length - 1 )
};

    function sufOrder(root){
        let rs = []
        const help = function(root){
            if(!root){
                return 
            }
            help(root.left)
            help(root.right)
            rs.push(root.val)
        }
        help(root)
        return rs
    }

    function preOrder(root){
        let rs = []
        const help = function(root){
            if(!root){
                return 
            }
            rs.push(root.val)
            help(root.left)
            help(root.right)
        }
        help(root)
        return rs
    }

// 迭代版
function buildTree2(preorder,inorder) {
        if (!preorder.length) return null; // 判空
        let s = []; // 创建辅助栈
        // 前序遍历首位置即为树的根节点
        // 创建根节点
       let  root = new TreeNode(preorder[0]);
        s.push(root); // 根节点入栈
        let inorder_index = 0; // 扫描中序遍历的指针
        // 遍历前序遍历
        for (let i = 1; i < preorder.length; i++) {
            let node = s[s.length - 1 ];
            if (node.val != inorder[inorder_index]) {
                // 若当前栈顶元素与中序遍历指针所指位置元素不相等
                // 则前序遍历中处在栈顶元素后一位的元素是栈顶元素的左子树
                // 创建左子树节点
                node.left = new TreeNode(preorder[i]);
                // 左子树节点入栈
                s.push(node.left);
            } else {
                // 若当前栈顶元素与中序遍历指针所指位置元素相等
                // 则前序遍历中所有的左子树节点都已经重建完毕且入栈了
                // 栈顶即为最左下角的树节点
                // while循环向上返回，寻找位置进行右子树的重建
                while (s.length && s[s.length - 1 ].val == inorder[inorder_index]) {
                    // 指针向右扫描中序遍历
                    // 栈中所有与当前指针所指元素相等的节点出栈
                    node = s[s.length - 1 ];
                    s.pop();
                    inorder_index++;
                }
                // 跳出循环后，node所指栈顶元素即是需要重建右子树的节点
                node.right = new TreeNode(preorder[i]);
                // 重建完的右子树节点入栈
                s.push(node.right);
            }
        }
        return root;
    }

    // 中 后序构造二叉树
    const postorderStr = '103857 579220 634827 591899 787863 1046307 1591804 1456881 1382996 1279694 1158931 827654 1654115 1858301 2309657 2343977 2317931 2267835 1767859 2534345 2532162 2437415 2424201 1612718 2770175 2833362 3014150 3393602 3126711 3482580 2881637 2871682 2826584 3733657 3523647 3834018 2764278 3920601 4208987 4309938 4297111 4225518 3866869 4496929 4522001 4435967 5066986 4986504 4746509 5075516 4547481 5332515 5474284 5255939 5655006 5811063 5949618 5702782 6028856 5541875 5233892 6196531 6213872 6350155 6477928 6418966 6626558 6532974 6983104 6280298 7246794 7530932 7653296 7299049 7295593 7732415 7748116 8208637 7691842 7120444 7086416 6040500 4407246 8409970 8414634 8318376 8989734 9076914 9463496 9342589 9608664 9253016 9232618 9193845 9772869 9861978 8579250 8220339 3854965 2678011',
     inorderStr= '103857 579220 591899 634827 787863 827654 1046307 1158931 1279694 1382996 1456881 1591804 1612718 1654115 1767859 1858301 2267835 2309657 2317931 2343977 2424201 2437415 2532162 2534345 2678011 2764278 2770175 2826584 2833362 2871682 2881637 3014150 3126711 3393602 3482580 3523647 3733657 3834018 3854965 3866869 3920601 4208987 4225518 4297111 4309938 4407246 4435967 4496929 4522001 4547481 4746509 4986504 5066986 5075516 5233892 5255939 5332515 5474284 5541875 5655006 5702782 5811063 5949618 6028856 6040500 6196531 6213872 6280298 6350155 6418966 6477928 6532974 6626558 6983104 7086416 7120444 7246794 7295593 7299049 7530932 7653296 7691842 7732415 7748116 8208637 8220339 8318376 8409970 8414634 8579250 8989734 9076914 9193845 9232618 9253016 9342589 9463496 9608664 9772869 9861978'
    let strPre6 = '1318073 678016441 874092905 2091308855 763075536 238193668 411460068 512019536 545368023 540157165 1008096286 1575787619 1494177729 2118806932 1214271570 725179549 1122983318 1894335790 1656555755 1754574577 2036958682 2127751547 1222560585 452217599 476559660 1571685957 1277021199 943723475 1993711230 1117298469 838359115 661437838 1410386394 439628372 1490302524 1412745907 1441257717 1750395106 512066289 1331145694 81044612 612161686 7303825 348818896 2116312409 91012802 643806550 1434072264 1243570767 1383028365 194735427 153243561 731636974 131259296 609282403 1007318325 1385498974 916071597 1105065436 1396203596 440027203 1751004200 11690912 1068146107 1515815076 705477971 711043510 1909260662 1243292760 1005532010 1427673827 1079222458 844969044 85364897 208747683 1581512630 1077673491 581284439 744456070 833441068 1755684142 1358064814 1539128582 1693549559 739180775 218387530 389663987 1404989806 2080970677 955493297 93130413 1874756275 1148645141 1548381904 447826182 1831941786 972550263 1154232924 9'
   
     const postorder1 = postorderStr.split(' ')
    const inorder1 = inorderStr.split(' ');
    
     function  buildTree3( inorder,  postorder) {
        if (inorder.length === 0) return null;
        const root = new TreeNode(postorder[postorder.length -1]);
        const stk = [];
        stk.push(root);
        let  inorderPos = inorder.length - 1;
        for (let i = postorder.length - 2; i >= 0; --i) {
            let postorderVal = postorder[i];
            const node = stk[stk.length - 1];
            if (node.val != inorder[inorderPos]) {
                node.right = new TreeNode(postorderVal);
                stk.push(node.right);
            } else {
                while (!stk.length === 0 && stk[stk.length - 1].val == inorder[inorderPos]) {
                    node = stk[stk.length - 1];
                    stk.pop();
                    inorderPos--;
                }
                node.left = new TreeNode(postorderVal);
                stk.push(node.left);
            }
        }
        return root;
    }

    let  root1 = buildTree3(inorder1, postorder1)
    let arr11 = preOrder(root1),res16 = 0
    arr11.forEach((v,i)=>{
        res16 += parseInt(v) * i
    })
    console.log(arr11,res16,'arr11')
    function ppstack(arr){
        let popres =[], stack = [],index = 1,res  =0;
        let po = RegExp('pop') 
        for(let i = 0;i < arr.length;i++){
           let item = arr[i]
           if(item.search(/push/) != -1){
                let val = parseInt(item.split(' ')[1]);
                // console.log(val)
                stack.push(val)
           }else if(/pop/.test(item)){
            //    文件类型实际是识别文件后缀
               let num = stack.pop()
                res +=  num *  index++  
               popres.push( num)
           } 
        }
        console.log(res,'res',popres,stack,arr)
        // 11186206671  search 方法返回开始索引，没有则返回-1
    }
        const h2 = {
        data(){
            return {
                text:'90'
            }
        },
        beforeCreate(){
            console.log(0)
        },
        created(){
            console.log('1')
        },
        beforeMount(){
            console.log('要加载')
        },
        mounted(){
            console.log(3)
            setTimeout(()=>{
                this.text = 80
            },100)
        },
        beforeUpdate(){
            console.log(4)

        },
        updated(){
            console.log(5,'组件相关依赖发生了变化，也就是和视图相关')

        },
        beforeDestroy(){
            console.log(6)

        },
        destroyed(){
            console.log(7)

        },

        template: `
        <h2><slot></slot></h2>
        `
    }

        // 全局组件，组件名即输出组件的标签名
        Vue.component('component1', {
        // 局部 键名 就是标签名
        components:{
            mm:h2
        },
        template:`
        <div>
            <h1>壹</h1>
            <mm>贰</mm>
        </div>
        
        `
    })
    const modal = {
        props:{
            data:{
                type:Object,
                default:{}
            },
            visible:{
                type:Boolean,
                default:false
            }
        },
        data(){
            return {
                res:{}
            }
        },
        methods:{
            close(){
                this.$emit('update:visible',false)
            },
            save(){
                this.$emit('save',res)
            }
        },
        template:` <div class="modal" v-show = "visible">
                     <a class="close" href="javascript:;" @click="close()">x</a>
                     {{data.title}}
                  </div>`
    };
    const vSwitch ={
        model:{
            prop:'checked',
            event:'change'
        },
        props:['checked'],
        data(){
            return {
                info:'关'
            }
        },
        methods:{
            handler(that,e){
                this.info = e.target.checked?'开':'关'
                this.$emit('change',e.target.checked)
            }
        },
        template:`<label for="">
            {{info}}
            <input type="checkbox" @change="handler(this,$event)" :checked="checked" name="" id="">
            
        </label>`
        // 这里的this不行 
    }
    const app = new Vue({
        el:'#app',
        name:'component',
        data(){
            return {
                msg:'',
                visible:false,
                check:false
            }
        },
        components:{
            'v-modal':modal,
            'v-switch':vSwitch
        }
    //   template:`<slot></slot>`
    })
// 如果有template 属性那么写在容器内的html会被忽略,也就是等同于innerHTML slot也不行
</script>
</html>